<template>
  <el-dialog
    width="800"
    :title="props.title + '营销工具'"
    v-model="props.open"
    :close-on-click-modal="false"
    destroy-on-close
    v-if="props.open"
    draggable
    class="dialog"
    :show-close="false"
  >
    <el-form :model="form">
      <el-form-item label="工具照片：" prop="imgFileId">
        <uploadByType
          :url="`http://192.168.110.12:8745/order/file`"
          v-model="form.imgFileId"
          :limit="1"
          :fileSize="5"
        ></uploadByType>
      </el-form-item>
      <el-form-item label="工具名称：" prop="toolName">
        <el-input v-model="form.toolName" style="max-width: 280px" placeholder="请输入工具名称" />
      </el-form-item>
      <el-form-item label="工具描述：" prop="describe">
        <el-input
          v-model="form.describe"
          style="width: 500px"
          placeholder="请输入描述"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button style="width: 96px; padding: 9px 27px" @click="emit('chengOpenFn')"
          >取消</el-button
        >
        <el-button style="width: 96px; padding: 9px 27px" @click="submitFn" type="primary"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { addMarketingToolApi } from '@/api/marketing/tool'
const props = defineProps({
  open: Boolean,
  title: String,
  form: () => ({})
})

/**
 * @param submitFn 新增营销工具方法
 */
function submitFn() {
  // emit('chengOpenFn')
  addMarketingToolApi(props.form).then((res) => {
    console.log(res)
  })
  // console.log(form)
}
/**
 * @param emit 调用父组件
 * @param chengOpenFn 修改父组件的open值
 */
const emit = defineEmits(['chengOpenFn'])
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 169px;
  height: 96px;
  display: block;
}
</style>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 169px;
  height: 96px;
  text-align: center;
}
</style>
